<template>
<div class="audioShare">
    <!-- 图片 -->
    <div class="swiperBoxWrap">
        <div class="swiperBox">
            <img :src="posterImg" class="image" />
            <vue-canvas-poster :widthPixels="600" :painting="painting" @success="posterSuccess" @fail="posterFail"></vue-canvas-poster>
        </div>
    </div>
    <!-- 下面按钮 -->
    <div class="chooseBox">
        <!--是否展示个人手机号码-->
        <div class="chooseBox_showPhone" @click="showPhoneIconBtn">
            <div class="phoneImg" :class="showPhoneIcon?'on':''"></div>
            <div class="showPhoneText">是否展示个人手机号码</div>
        </div>
        <div class="chooseBox_saveBtn">
            <div class="saveBtnBox" @click="saveImgBtn">
                <div class="imgWrap">
                    <img src="../../../static/images/icon_xiangce@2x.png" />
                    <span>保存到相册</span>
                </div>
            </div>
            <div class="saveBtnBox">
                <div class="imgWrap">
                    <img src="../../../static/images/icon_wechat@2x.png" />
                    <span>分享给好友</span>
                </div>
            </div>
        </div>
    </div>
    <mt-popup v-model="popupVisible" popup-transition="popup-fade" :modal="true" :closeOnClickModal="true" class="popup">
        <span class="popup-text">长按保存图片</span>
        <img v-lazy="posterImg" class="popup-image" />
    </mt-popup>
</div>
</template>

<script>
import controller from "@/components/controllers/controllers";
export default {
    name: "BaskInTheSun",
    components: {},
    data() {
        return {
            title: '晒一晒', //晒一晒，小程序名片
            popupVisible: false,
            showPhoneIcon: false,
            cavImg: null, //海报背景图
            posterImg: "", //海报图片路径（base64）
            //海报配置
            painting: {},
            QRCode: "https://youyang.mdshuzhi.com/static/miniprogram/qrcode.png", //二维码图片
            //用户信息
            telephone: "",
            userInfo: localStorage.getItem("userInfo") ? JSON.parse(localStorage.getItem("userInfo")) : {}
        };
    },
    computed:{
      //是否显示长按保存图片
      isPopup(){
        return /(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent);
      }
    },
    mounted() {
        let that = this
        controller.shareImg({
                type: 9, //类别
                token: localStorage.getItem("token")
            })
            .then(res => {
                that.cavImg = res.baseData, //海报图片
                that.userInfo = JSON.parse(localStorage.getItem("userInfo"))
                // 获取二维码
                that.$nextTick(() => {
                    that.makeShareImg();
                });
            })
    },
    //方法集合
    methods: {
        saveImgBtn() {
            this.popupVisible = true
            this.$updateScore(12)
        },
        // 获取用户信息
        getUserInfos() {
            let that = this;
            controller
                .getUserInfo({
                    token: localStorage.getItem("token"),
                })
                .then((res) => {
                    console.log("获取用户信息", res);
                    let userInfo = res.baseData;
                    userInfo.listenTimes = (userInfo.listenTimes / 60 / 60).toFixed(
                        2
                    );
                    this.userInfo = userInfo;
                    console.log("userInfo", this.userInfo)
                    localStorage.setItem("userInfo", JSON.stringify(userInfo));
                });
        },
        makeShareImg() {
            controller.makeShareImg({
                source: 2,
                path: "https://www.youyangfm.com/"
              }).then(res => {
                this.QRCode=res.baseData
                this.makePoster();
              })
        },
        // 生成海报
        makePoster() {
            this.painting = {
                width: "600px",
                height: "900px",
                background: "#fff",
                borderRadius: "8px",
                views: [{
                        type: "image",
                        url: this.cavImg + '?tamp='+(new Date()).valueOf(), //海报图片
                        css: {
                            width: "600px",
                            height: "600px",
                            top: "0px",
                            left: "0px",
                        },
                    },
                    {
                        type: "text",
                        text: this.userInfo.nick, //用户名
                        css: [{
                            top: "460px",
                            left: "25px",
                            color: "#fff",
                            fontSize: "40px",
                        }, ],
                    },
                    {
                        type: "rect", //背景色
                        css: {
                            width: "600px",
                            height: "66px",
                            color: "rgba(0,0,0,.1)",
                            top: "534px",
                        },
                    },
                    {
                        type: "text",
                        text: "周排行  " + this.userInfo.weekRank, //周排行
                        css: [{
                            top: "557px",
                            left: "48px",
                            color: "#FFFFFF",
                            fontSize: "20px",
                        }, ],
                    },
                    {
                        type: "text",
                        text: "月排行  " + this.userInfo.monthRank, //月排行
                        css: [{
                            top: "557px",
                            left: "248px",
                            color: "#FFFFFF",
                            fontSize: "20px",
                        }, ],
                    },
                    {
                        type: "text",
                        text: "总时长  " + this.userInfo.listenTimes, //总时长
                        css: [{
                            top: "557px",
                            left: "435px",
                            color: "#FFFFFF",
                            fontSize: "20px",
                        }, ],
                    },
                    {
                        type: "image",
                        url: this.userInfo.portrait, //头像
                        css: {
                            top: "632px",
                            left: "24px",
                            borderRadius: "26px",
                            width: "52px",
                            height: "52px",
                        },
                    },
                    {
                        type: "text",
                        text: this.userInfo.nick + this.telephone, //用户名和手机
                        css: [{
                            width: "500px",
                            maxLines: "2",
                            top: "640px",
                            left: "89px",
                            color: "#A8ACBB",
                            fontSize: "20px",
                        }, ],
                    },
                    {
                        type: "text",
                        text: "来有氧，一起听吧", //来有氧，一起听吧
                        css: [{
                            top: "685px",
                            left: "89px",
                            color: "#323232",
                            fontSize: "24px",
                        }, ],
                    },
                    {
                        type: "rect",
                        css: {
                            width: "580px",
                            height: "1px",
                            color: "#9B9B9B",
                            bottom: "167px",
                            left: "10px",
                        },
                    },
                    {
                        type: "image",
                        url: this.QRCode, //二维码
                        css: [{
                            bottom: "29px",
                            left: "21px",
                            width: "110px",
                            height: "110px",
                        }, ],
                    },
                    {
                        type: "text",
                        text: this.isPopup ? "长按识别二维码查看" : '', //长按识别二维码查看
                        css: [{
                            bottom: "105px",
                            left: "150px",
                            color: "#A8ACBB",
                            fontSize: "24px",
                        }, ],
                    },
                    {
                        type: "image",
                        url: "https://youyang-cdn.mdshuzhi.com/upload/pic_logo@2x.png?temp=4654546", //logo
                        css: [{
                            bottom: "41px",
                            left: "151px",
                            width: "40px",
                            height: "40px",
                        }, ],
                    },
                    {
                        type: "text",
                        text: "有氧FM·达人分享", //有氧FM·达人分享
                        css: [{
                            bottom: "51px",
                            left: "199px",
                            color: "#A8ACBB",
                            fontSize: "20px",
                        }, ],
                    },
                ],
            };
        },
        // 是否展示个人手机号码
        // 展示手机icon
        showPhoneIconBtn() {
            console.log("展示手机icon");
            let telephone = this.userInfo.mobile || "";
            let showPhoneIcon = !this.showPhoneIcon;
            let that = this;
            if (
                this.userInfo &&
                this.userInfo.nick &&
                this.userInfo.nick.length > 6
            ) {
                this.hasLenLeft = 260;
            } else if (
                this.userInfo &&
                this.userInfo.nick &&
                this.userInfo.nick.length <= 4
            ) {
                this.hasLenLeft = 220;
            }
            // showPhoneIcon false为选择显示手机号
            this.showPhoneIcon = showPhoneIcon;
            this.telephone = this.showPhoneIcon ? " |  " + telephone : "";
            this.userNameLeft = 200; //设置名字的离左边的距离
            if (this.timer) {
                clearTimeout(this.timer);
            }
            this.timer = setTimeout(() => {
                that.makePoster();
            }, 300);
        },
        // 海报生成成功
        posterSuccess(src) {
            // console.log("海报生成成功", src);
            this.posterImg = src;
            // console.log(this.posterImg)
        },
        // 海报生成失败
        posterFail(err) {
            console.log("海报生成失败", err);
        },
    },
};
</script>

<style lang="scss" scoped>
.audioShare {
    height: 1500px;
    background-color: #1a1c22;
}

.popup {
    background: transparent;

    .popup-image {
        width: 600px;
        max-width: 600px !important;
        height: 100%;
    }

    .popup-text {
        width: 100%;
        display: block;
        margin-bottom: 30px;
        font-size: 50px;
        color: #fff;
        text-align: center;
    }
}

/* 轮播图 */
.swiperBox {
    width: 100%;
}

.swiperBoxWrap {
    width: 100%;
    overflow: hidden;

    .swiperBox {
        width: 600px;
        height: 900px;
        margin: 0 auto;
        margin-top: 50px;
        box-sizing: border-box;
    }

    img {
        width: 100%;
        height: 100%;
        border-radius: 8px;
    }
}

/* 选择 */
.chooseBox {
    width: 600px;
    min-width: 640px;
    max-width: 960px;
    margin: 0 auto;
    // padding: 0 75px;
    box-sizing: border-box;
    margin-bottom: 35px;

    .chooseBox_showPhone {
        display: flex;
        align-items: center;
        margin-top: 32px;

        .phoneImg {
          width: 36px;
          height: 36px;
          background: #272C38;
          border-radius: 5px;
          &.on{
            background: url(https://youyang-cdn.mdshuzhi.com/upload/icon_xuanze@2x.png) no-repeat center center;
            background-size: 100%;
          }
          img{
            width: 100%;
            height: 100%;
          }
        }

        .showPhoneText {
            font-size: 30px;
            color: #fff;
            margin-left: 14px;
        }
    }

    .chooseBox_saveBtn {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 87px;

        .saveBtnBox {
            flex: 1;
            height: 130px;
            display: flex;
            justify-content: center;
            align-items: center;

            .imgWrap {
                width: 120px;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                position: relative;
            }

            img {
                width: 90px;
                height: 90px;
                margin-bottom: 16px;
            }

            span {
                font-size: 24px;
                color: #fff;
            }
        }
    }
}
</style>
